<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<base href="http://192.168.17.50:8080/Web_Ex/">
<style type="text/css">
	body{
		background-color: pink
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给文本框绑定获取焦点的事件
		$("#username").focus(function(){
			/*
				text()方法：用来获取或设置成对出现的标签中的文本内容
				对象.text()：获取文本内容
				对象.text("new value")：设置文本内容
				html()方法与text()方法的用法类似，唯一的区别是html()方法可以解析html标签
			*/
			//清空span标签中的文本值
			$("#msg").html("");
		});
		//给登录按钮绑定单击事件
		$("#sub").click(function(){
			/*
				val()：获取或设置input中的value属性值
				对象.val()：获取value属性值
				对象.val("new value")：设置value属性值
			*/
			//获取用户输入的用户名
			var username = $("#username").val();
			if(username == ""){
				alert("用户名不能为空！");
				//取消默认行为
				return false;
			}
			//获取用户输入的密码
			var pwd = $("#pwd").val();
			if(pwd == ""){
				alert("密码不能为空！");
				return false;
			}
			
		});
	});
</script>
</head>
<body>
	<h1>欢迎登录</h1>
	<form action="LoginServlet" method="post">
		用户名称：<input type="text" name="username" id="username"><span style="color: red" id="msg">${requestScope.msg }</span><br>
		用户密码：<input type="password" name="password" id="pwd"><br>
		<input type="submit" value="登录" id="sub">
	</form>
</body>
</html>